<template xmlns="http://www.w3.org/1999/html">
  <el-row class="warp">
    <el-col :span="24" style="margin-bottom: 20px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>新建订单</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col>
      <el-form :model="editForm" label-width="100px" :rules="rules" ref="editForm">
        <el-col>
          <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
          </div>
          <span>购车人</span><br/><br/>
          <el-form-item label="姓名" prop="customerName">
            <el-input v-model="editForm.customerName" auto-complete="off" style="width: 230px"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="customerIdCard">
            <el-input v-model="editForm.customerIdCard" auto-complete="off" style="width: 230px"></el-input>
          </el-form-item>
          <el-form-item label="婚姻状态" prop="bemarried0">
            <el-select v-model="editForm.bemarried0" placeholder="请选择" style="width: 230px">
              <el-option
                v-for="item in hyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="贷款银行" prop="bankName0">
            <el-select v-model="editForm.bankName0" placeholder="请选择" style="width: 230px">
              <el-option
                v-for="item in yhOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-row :gutter="5">
            <p>上传资料</p>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>身份证正面</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>身份证背面</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>授权书</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>授权书面签</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col v-if="this.editForm.bemarried0=='1'">
          <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
          </div>
          <span>共同购车人</span><br/><br/>
          <el-form-item label="姓名" prop="commonName">
            <el-input v-model="editForm.commonName" auto-complete="off" style="width: 230px"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="commonIdCard">
            <el-input v-model="editForm.commonIdCard" auto-complete="off" style="width: 230px"></el-input>
          </el-form-item>
          <el-form-item label="婚姻状态" prop="bemarried1">
            <el-select v-model="editForm.bemarried1" placeholder="请选择" style="width: 230px">
              <el-option
                v-for="item in hyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="贷款银行" prop="bankName1">
            <el-select v-model="editForm.bankName1" placeholder="请选择" style="width: 230px">
              <el-option
                v-for="item in yhOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-row :gutter="5">
            <p>上传资料</p>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>身份证正面</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>身份证背面</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>授权书</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>授权书面签</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col v-for="item in editForm.items">
          <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
          </div>
            <span>担保人</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button @click="deleteGuarantee(item)">删除</el-button><br/><br/>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="item.guaranteeName" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="author">
              <el-input v-model="item.guaranteeAuthor" auto-complete="off" style="width: 230px"></el-input>
            </el-form-item>
          <el-row>
            <p>上传资料</p>
            <el-col :span="4">
              <el-form-item :model="item.img.img1">
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>身份证正面</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :model="item.img.img2">
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>身份证背面</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :model="item.img.img3">
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>授权书</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :model="item.img.img4">
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <span>授权书面签</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-col>
    <el-col>
      <el-button @click="addGuarantee"><i class="el-icon-plus"></i>  新增担保人</el-button>
      <div style="margin-top: 30px;text-align: center">
        <el-button @click="">取消</el-button>
        <el-button type="primary" @click="submitInfo('editForm')">提交</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import ElCol from 'element-ui/packages/col/src/col'
  import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
  import ElRow from 'element-ui/packages/row/src/row'
  import $ from 'jquery'

  export default {
    components: {
      ElRow,
      ElForm,
      ElCol,
      ElFormItem},
    data() {
      return {
        filters: {
          name: ''
        },
        loading: false,

        hyOptions:[{
          value:'1',
          label:'已婚'
        },{
          value:'2',
          label:'未婚'
        }],

        yhOptions:[{
          value:'1',
          label:'工商银行'
        },{
          value:'2',
          label:'招商银行'
        },{
          value:'3',
          label:'杭州银行'
        }],
        value:'',
        editFormVisible:false,
        editFormVisible: false,//编辑界面是否显示
        editLoading: false,
        dialogImageUrl: '',
        dialogVisible: false,
        rules: {
          customerName: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          customerIdCard: [
            {required: true, message: '请输入身份证号', trigger: 'blur'}
          ],
          bemarried0: [
            {required: true, message: '请选择婚姻状态', trigger: 'change'}
          ],
          bankName0: [
            {required: true, message: '请选择银行', trigger: 'change'}
          ],
          commonName: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          commonIdCard:[
            {required: true, message: '请输入身份证号', trigger: 'blur'}
          ],
          bemarried1:[
            {required: true, message: '请选择婚姻状态', trigger: 'change'}
          ],
          bankName1:[
            {required: true, message: '请选择银行', trigger: 'change'}
          ],
        },
        editForm: {
          customerName: '',
          customerIdCard: '',
          commonName: '',
          commonIdCard: '',
          bankName1:'',
          bankName0:'',
          bemarried0:'',
          bemarried1:'',
          items:[{
            guaranteeName: '',
            guaranteeAuthor: '',
            img:{img1:'',img2:'',img3:'',img4:''}
          }]
        },
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
      },

      addGuarantee:function () {
        this.editForm.items.push({
          name: '',
          author: '',
          img:{img1:'',img2:'',img3:'',img4:''}
        })
      },

      deleteGuarantee:function (item) {
        var index = this.editForm.items.indexOf(item)
        if (index !== -1) {
          this.editForm.items.splice(index, 1)
        }
      },

      submitInfo:function (formName) {
        var customerName = [];
        var bemarried=[];
        var bankId=[];
        var bankName=[];
        var idCard=[];
        var customerType=[];
        var formJson = {};

        customerName.push(this.editForm.customerName);
        customerName.push(this.editForm.commonName);

        bemarried.push(this.editForm.bemarried0);
        bemarried.push(this.editForm.bemarried1);

        bankName.push(this.editForm.bankName0);
        bankName.push(this.editForm.bankName1);

        bankId.push(this.editForm.bankName0);
        bankId.push(this.editForm.bankName1);

        idCard.push(this.editForm.customerIdCard);
        idCard.push(this.editForm.commonIdCard);

        customerType.push("BUYER");
        customerType.push("COMMONBUYER");

         this.$refs[formName].validate((valid)=>{
          if(valid){
            alert('submit!')
          }else{
            console.log('error submit!!!')
            return false;
          }
        })

        $.each(this.editForm.items,function (index,value) {
          bemarried.push('');
          bankName.push('');
          bankId.push('');
          customerName.push(value.guaranteeName)
          idCard.push(value.guaranteeAuthor);
          customerType.push("SPONSOR");
        })

        formJson.customerName=customerName;
        formJson.customerType=customerType;
        formJson.idCard=idCard;
        formJson.bankId=bankId;
        formJson.bankName=bankName;
        formJson.bemarried=bemarried;
        formJson.annexBatchNo='';

        //http://172.21.3.138:8080/order  http://localhost:8082/order
        this.$axios.post(this.$store.state.url+"/order",
          formJson
        ).then((response)=>{
          console.log(response.data);
        }).catch(function (response) {
          console.log(response)
        })
        /*$.ajax({
          type:'POST',
          url:'http://localhost:8082/order/orderAddForm',
          data:formJson,
          dataType:'JSON'
        })*/
      },

      showEditDialog: function () {
        this.editFormVisible = true;
      },

      handleClick:function(){
        this.$router.push({path:'/salesman/CreditInvestigationDetail'})
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    },
    mounted() {

    }
  }
</script>

<style scoped>

</style>
